<template>
  <!-- https://blog.csdn.net/qq_25324335/article/details/78670188 -->
  <!-- .v-show的属性，是用来控制其是否显示的，因为我们的一些界面（比如备忘列表界面）是不需要显示底部tab的，所以这里就要将底部的tab隐藏
掉。这里先写死，后面会有用vuex来进行管理。
2.将selected作为观察者，是因为要处理其显示的改变和进行页面跳转，当某一个tab选中时，进行selected的icon显示。这些逻辑都是在watch里面处理的。
3.fixed是将tabbar固定在底部栏。 -->
  <mt-tabbar v-model="message" fixed v-show="this.isShow">
    <mt-tab-item id="home">
      <img slot="icon" :src="src1">
      主页
    </mt-tab-item>
    <mt-tab-item id="ShoppingList">
      <img slot="icon" :src="src2">
      积分商城
    </mt-tab-item>
    <mt-tab-item id="GroupList">
      <img slot="icon" :src="src3">
      微社区
    </mt-tab-item>
    <mt-tab-item id="UserCenter">
      <img slot="icon" :src="src4">
      个人中心
    </mt-tab-item>
  </mt-tabbar>

</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      message: "home",
      src1: "../../../static/imgs/tab_01.png",
      src2: "../../../static/imgs/tab_02.png",
      src3: "../../../static/imgs/tab_03.png",
      src4: "../../../static/imgs/tab_04.png"
    };
  },
  computed:{
    ...mapState({
      isShow:'showTabbar'
    })
  },
  props: {},
  // 关于watch
  // https://blog.csdn.net/wandoumm/article/details/80259908
  watch: {
    message: {
      handler(newMessage, oldMessage) {
        if (this.message == "home") {
          this.$router.push("/home");
          this.src1 = "../../../static/imgs/tab_1.png";
        } else {
          this.src1 = "../../../static/imgs/tab_01.png";
        }
        if (this.message == "ShoppingList") {
          this.$router.push("/jifen");
          this.src2 = "../../../static/imgs/tab_2.png";
        } else {
          this.src2 = "../../../static/imgs/tab_02.png";
        }
        if (this.message == "GroupList") {
          this.$router.push("/wei");
          this.src3 = "../../../static/imgs/tab_3.png";
        } else {
          this.src3 = "../../../static/imgs/tab_03.png";
        }
        if (this.message == "UserCenter") {
          this.$router.push("/users");
          this.src4 = "../../../static/imgs/tab_4.png";
        } else {
          this.src4 = "../../../static/imgs/tab_04.png";
        }
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true
    }
  }
};
</script>

<style scoped>
</style>
